<template>
	<u-popup :show="show" mode="center" @close="close" @open="open">
		<view v-if="type === 0" class="make" @touchstart="touchStart" @touchend="touchEnd">
			<u-row customStyle="font-size: 34rpx;color: #acadaf;"><u-col textAlign="center">火锅店（禅城）</u-col></u-row>
			<u-row justify="space-between" :customStyle="touchIndex < 2 ? headStyle : headStyle1">
				<block v-if="touchIndex === 0"><u-col span="6">制作单-堂食</u-col></block>
				<block v-if="touchIndex === 1">
					<u-col span="6">制作单-打包</u-col>
					<u-col span="6" textAlign="right">取单号：1110</u-col>
				</block>
				<block v-if="touchIndex === 2"><u-col span="6">制作单-同城配送</u-col></block>
			</u-row>
			<u-row
				v-if="touchIndex < 2"
				justify="space-between"
				customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold;border-bottom: 1rpx dashed #efefef; padding: 20rpx 0; box-sizing: border-box;"
			>
				<u-col span="6">桌号：16</u-col>
			</u-row>
			<u-row v-else justify="space-between" customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold; padding: 20rpx 0; box-sizing: border-box;">
				<u-col>预约送达：12-29 14:30</u-col>
			</u-row>
			<u-row justify="space-between" align="top" customStyle="font-size: 34rpx;padding: 20rpx 0 0 0; box-sizing: border-box; color:#88898c;">
				<u-col span="3" textAlign="center">商品名称</u-col>
				<u-col span="3" textAlign="center">规格</u-col>
				<u-col span="1" textAlign="center">数量</u-col>
				<u-col span="1" textAlign="center">价格</u-col>
				<u-col span="1" textAlign="center">小计</u-col>
			</u-row>
			<u-row justify="space-between" customStyle="font-size: 34rpx; color:#88898c;">
				<u-col span="3" textAlign="center">三彩无骨鱼</u-col>
				<u-col span="3" textAlign="center">500G/微辣/草鱼</u-col>
				<u-col span="1" textAlign="center">1.0</u-col>
				<u-col span="1" textAlign="center">18</u-col>
				<u-col span="1" textAlign="center">18</u-col>
			</u-row>

			<u-row customStyle="font-size: 34rpx;border-bottom: 1rpx dashed #efefef;padding: 20rpx 0 100rpx 0;box-sizing: border-box; color:#88898c;">备注：</u-row>
			<u-row customStyle="color:#88898c;font-size: 34rpx;padding: 20rpx 0 0 0;box-sizing: border-box;">打印时间：2022-02-03 12:32</u-row>
		</view>

		<view v-else class="make" @touchstart="touchStart" @touchend="touchEnd">
			<u-row customStyle="font-size: 34rpx;color: #acadaf;"><u-col textAlign="center">火锅店（禅城）</u-col></u-row>
			<u-row
				v-if="touchIndex === 0"
				justify="space-between"
				customStyle="font-size: 34rpx; color:#8a8b8e;border-bottom: 1rpx dashed #efefef;font-weight: bold; padding: 20rpx 0; box-sizing: border-box;"
			>
				结账单-堂食-已结
			</u-row>
			<u-row
				v-if="touchIndex === 1"
				justify="space-between"
				customStyle="font-size: 34rpx; color:#8a8b8e;border-bottom: 1rpx dashed #efefef;font-weight: bold; padding: 20rpx 0; box-sizing: border-box;"
			>
				结账单-打包-已结
			</u-row>
			<u-row v-if="touchIndex === 2" justify="space-between" customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold; padding: 20rpx 0; box-sizing: border-box;">
				结账单-同城配送-已结
			</u-row>
			<u-row v-if="touchIndex === 2" justify="space-between" customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold; padding: 20rpx 0; box-sizing: border-box;">
				预约送达：12-29 14:30
			</u-row>
			<u-row v-if="touchIndex === 2" justify="space-between" customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold; padding: 20rpx 0; box-sizing: border-box;">
				配送信息：文化北路181号城阳大夏1101云启点 张小泉 13054458888
			</u-row>
			<u-row
				v-if="touchIndex < 2"
				justify="space-between"
				customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold;border-bottom: 1rpx dashed #efefef; padding: 20rpx 0; box-sizing: border-box;"
			>
				<u-col span="6">桌号：16</u-col>
			</u-row>
			<u-row justify="space-between" align="top" customStyle="font-size: 34rpx;padding: 20rpx 0 0 0; box-sizing: border-box; color:#88898c;">
				<u-col span="4">商品名称</u-col>
				<u-col span="3" textAlign="center">数量</u-col>
				<u-col span="3" textAlign="center">小计</u-col>
			</u-row>
			<u-row justify="space-between" customStyle="font-size: 34rpx; color:#88898c;">
				<u-col span="4">三彩无骨鱼</u-col>
				<u-col span="3" textAlign="center">1.0</u-col>
				<u-col span="3" textAlign="center">18</u-col>
			</u-row>

			<u-row customStyle="font-size: 34rpx;border-bottom: 1rpx dashed #efefef;padding: 20rpx 0 100rpx 0;box-sizing: border-box; color:#88898c;">备注：</u-row>
			<u-row
				justify="space-between"
				customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold;border-bottom: 1rpx dashed #efefef; padding: 20rpx 0; box-sizing: border-box;"
			>
				<u-col span="6">优惠券名称</u-col>
				<u-col span="6" textAlign="right">-10</u-col>
			</u-row>
			<u-row
				justify="space-between"
				customStyle="font-size: 34rpx; color:#8a8b8e;font-weight: bold;border-bottom: 1rpx dashed #efefef; padding: 20rpx 0; box-sizing: border-box;"
			>
				<u-col span="6">消费合计</u-col>
				<u-col span="6" textAlign="right">10</u-col>
			</u-row>
			<u-row customStyle="color:#88898c;font-size: 34rpx;padding: 20rpx 0 0 0;box-sizing: border-box;">打印时间：2022-02-03 12:32</u-row>
			<u-row customStyle="color:#88898c;font-size: 34rpx;padding: 20rpx 0 0 0;box-sizing: border-box;">联系地址：佛山市禅城区祖庙街道城央大夏1101</u-row>
			<u-row customStyle="color:#88898c;font-size: 34rpx;padding: 20rpx 0 0 0;box-sizing: border-box;">联系电话：202-66139696</u-row>
		</view>
	</u-popup>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			type: 0,

			delta: 50, //触发值
			touchStartX: 0, // 触屏起始点x
			touchStartY: 0, // 触屏起始点y
			touchIndex: 0,

			headStyle: {
				fontSize: '34rpx',
				color: '#8a8b8e',
				fontWeight: 'bold',
				borderBottom: '1rpx dashed #efefef',
				padding: '20rpx 0',
				boxSizing: 'border-box'
			},
			headStyle1: {
				fontSize: '34rpx',
				color: '#8a8b8e',
				fontWeight: 'bold',
				padding: '20rpx 0',
				boxSizing: 'border-box'
			}
		};
	},
	methods: {
		open(e) {
			this.show = true;
			this.type = e;
			console.log('open', e);
		},
		close() {
			this.show = false;
			this.touchIndex = 0;
			// console.log('close');
		},

		/**
		 * 触摸开始
		 **/
		touchStart(e) {
			console.log('触摸开始');
			this.touchStartX = e.touches[0].clientX;
			this.touchStartY = e.touches[0].clientY;
		},

		/**
		 * 触摸结束
		 **/
		touchEnd(e) {
			let deltaX = e.changedTouches[0].clientX - this.touchStartX;
			let deltaY = e.changedTouches[0].clientY - this.touchStartY;
			// X轴的滑动距离大于 delta，且此次事件是以X轴移动为主（左滑或者右滑）；
			if (Math.abs(deltaX) > this.delta && Math.abs(deltaX) > Math.abs(deltaY)) {
				if (deltaX >= 0) {
					if (this.touchIndex > 0) {
						this.touchIndex--;
					}
					// console.log('右滑', this.touchIndex);
				} else {
					if (this.touchIndex < 2) {
						this.touchIndex++;
					}
					// console.log('左滑', this.touchIndex);
				}
				// Y轴的滑动距离大于 delta，且此次事件是以Y轴移动为主（上滑或者下滑）；
			} else if (Math.abs(deltaY) > this.delta && Math.abs(deltaX) < Math.abs(deltaY)) {
				if (deltaY < 0) {
					// console.log('上滑');
				} else {
					// console.log('下滑');
				}
				// 两轴位移都特别小，可以判断是点击
			} else if (Math.abs(deltaY) < 25 && Math.abs(deltaX) < 25) {
				// console.log('点击');
			} else {
				// console.log('可能是误触');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.make {
	width: 570rpx;
	overflow: hidden;
	padding: 20rpx 20rpx 100rpx 20rpx;
	box-sizing: border-box;
}
</style>
